<template>
    <div class="c-ticket__search">
        <Tabs type="card">
            <TabPane label="开门统计">
                <Card class="no-border-card">           
                    <!--标题-->
                    <p slot="title">
                        开门统计
                        <!--<Button type="primary" class="btn-in-top-large" @click="getData(true)" v-pmis="36">导出报表</Button>-->      
                    </p>            
                    <!--标题end-->
                    
                    <Row :gutter="30" class="margin-bottom-10" type="flex">
                        <i-col class="c-ticket__row" span="6">
                            <span class="c-ticket__label">人员标签</span>
                            <div class="c-ticket__item">
                                <Select v-model="formData.role_id" @on-change="handleSearch(false)" placeholder="请选择人员标签">
                                    <Option v-for="(item,index) in statisticalDate" :value="item.id" :key="item.id">{{ item.name }}</Option>
                                </Select>
                            </div>
                        </i-col>
                        <i-col class="c-ticket__row" span="6">
                            <span class="c-ticket__label">开门人员</span>
                            <div class="c-ticket__item">
                                <Input v-model.trim="formData.name" placeholder="姓名" @on-enter="handleSearch(false)" />
                            </div>
                        </i-col>
                        <i-col class="c-ticket__row" span="6">
                            <span class="c-ticket__label">开门人电话</span>
                            <div class="c-ticket__item">
                                <Input v-model.trim="formData.phone" placeholder="手机号码"  @on-enter="handleSearch(false)" />
                            </div>
                        </i-col>
                        <i-col class="c-ticket__row" span="6">
                            <span class="c-ticket__label">统计时间段</span>
                            <div class="c-ticket__item">
                                <Select v-model="formData.time_scope" @on-change="handleSearch(false)" placeholder="请选择统计时间段">
                                    <Option v-for="(item,index) in periodTimeData" :value="item.type" :key="index">{{ item.name }}</Option>
                                </Select>
                            </div>
                        </i-col>
                    </Row>
                    <Row :gutter="30" class="margin-bottom-10" type="flex">
                        
                        <i-col class="c-ticket__row" span="6">
                            <span class="c-ticket__label">所在城市</span>
                            <div class="c-ticket__item">
                                <Input v-model.trim="formData.city" placeholder="请输入城市" @on-enter="handleSearch(false)" />
                            </div>
                        </i-col>
                        <i-col class="c-ticket__row" span="10">
                            <span class="c-ticket__label">搜索关键字</span>
                                <div class="c-ticket__item">
                                     <Input v-model.trim="formData.address" placeholder="/房源地址/房源编号/小区名称"  @on-enter="handleSearch(false)" />
                                </div>
                        </i-col>
                        <i-button @click="handleSearch" style="width: 70px" type="primary">搜索</i-button>
                    </Row>

                                  
                    <!--搜索条件end-->          

                    <!--开门统计表格数据-->
                    <Table stripe border :columns="columns" :data="datas" :loading="isLoadig"></Table>
                    <!--开门统计表格数据end-->


                    <!--分页-->
                    <Page 
                    :total="total"
                    :page-size="size"
                    :current.sync="currentPage"
                    @on-change="loadData(true)"
                    show-elevator
                    show-total
                    style="text-align:center"></Page>
                    <!--分页end-->

                    
                </Card> 
            </TabPane>
        </Tabs>
    </div>
</template> 

<script>
import { http, api } from '@/libs/http'
import { faceAccessAuthType, periodTimeData } from '@/libs/const'
import debounce from 'lodash/debounce'

export default {
  name: 'openDoorCount',
  data () {
    return {
      // 门禁人员标签
      statisticalDate: faceAccessAuthType.list,
      // 时段
      periodTimeData: periodTimeData.list,
      isLoadig: false, // 表格loading状态
      columns: [
        {
          width: 160,
          title: '姓名',
          key: 'relation_name',
          align: 'center'
        },
        {
          minWidth: 90,
          title: '人员标签',
          key: 'relation_role',
          align: 'center',
          render: (h, params) => {
            if (params.row.relation_role < 0 || params.row.relation_role > 3) {
              return h('span', '未知')
            } else {
              return h('span', ['员工', '租客', '访客'][params.row.relation_role - 1])
            }
          }
        },
        {
          minWidth: 200,
          title: '手机号码',
          key: 'relation_phone',
          align: 'center',
          render: (h, params) => {
            let result = params.row.relation_phone ? params.row.relation_phone : '-'
            return h('span', result)
          }
        },
        {
          minWidth: 90,
          title: '身份证号码',
          key: 'relation_identity_number',
          align: 'center',
          render: (h, params) => {
            let result = params.row.relation_identity_number ? params.row.relation_identity_number : '-'
            return h('span', result)
          }
        },
        {
          minWidth: 90,
          title: '房源所在地区',
          key: 'city',
          align: 'center',
          render: (h, params) => {
            let result = params.row.city + params.row.district
            return h('span', result)
          }
        },
        {
          minWidth: 120,
          title: '房源地址|房源编号',
          key: 'home_address',
          align: 'center',
          render: (h, params) => {
            let result = params.row.home_address + '(' + params.row.home_name + ')'
            return h('span', result)
          }
        },
        {
          minWidth: 90,
          title: '开门次数',
          key: 'open_count',
          align: 'center'
        }
      ],
      datas: [], // 表格数据
      total: 0, // 总数据量
      size: 10, // 每页数据量
      currentPage: 1, // 当前页码
      formData: {
        time_scope: 'all', // 需要查询的范围
        name: '', // 姓名
        phone: '', // 电话
        role_id: 0, // 角色
        city: '', // 城市名称
        address: '', // 房源地址和房源编号
        offset: 0, // 分页参数
        limit: 10 // 分页参数
      }
    }
  },
  created () {
    this.init()
  },
  mounted () {

  },
  computed: {

  },
  methods: {
    init () {
      this.loadData(false)
    },

    // 加载数据
    loadData (index) {
      let params = {
        time_scope: this.formData.time_scope, // 需要查询的范围
        name: this.formData.name, // 姓名
        phone: this.formData.phone, // 电话
        role_id: this.formData.role_id === 0 ? null : this.formData.role_id, // 角色
        city: this.formData.city, // 城市名称
        address: this.formData.address, // 房源地址和房源编号
        offset: this.size * (this.currentPage - 1), // 分页参数
        limit: this.size // 分页参数
      }
      http.request(this, api.face_open_statistic, null, params, res => {
        if (res) {
          console.log('加载人脸开门统计成功', res)
          this.datas = res.rows
          this.total = res.count
        }
      })
    },

    // 时间段
    periodTimeChange (id) {
      this.formData.time_scope = id
      console.log(id)
    },

    // 搜索确定
    handleSearch: debounce(function () {
      this.loadData(false)
    }, 300)
  }
}
</script>

<style lang="less">
.switch-icon {
    transition: transform 0.3s linear;
    transform-origin: center center;
}
.icon-up {
    transform: rotate(180deg);
}
.c-ticket {
    &__search {
        margin: 20px 0;
        padding-bottom: 20px;
        background-color: #efeff1;
        border-bottom: 1px solid #ddd;
    }
    &__row {
        display: flex;
        align-items: center;
    }

    &__label {
        margin-right: 5px;
    }

    &__item {
        flex: 1;
    }

    &__label--width {
        width: 84px;
    }
}
</style>